.anime-3 {
  background-color   : rgb(92, 92, 92);
  background-image   : url(./realsee_anime.png);
  background-repeat  : no-repeat;
  color              : #fff;
  background-position: bottom left;
  animation          : anime-3 16s linear infinite;
  position           : relative;
}

.anime-3a {
  top                : 10px;
  width              : 48px;
  height             : 48px;
  background-image   : url(./realsee_anime.png);
  position           : absolute;
  background-size    : 2640px 48px;
  background-position: 0 0;
  animation          : real-see-anime 4s steps(1, start) infinite;
  background-repeat  : no-repeat;
}

.anime-3-background {
  background-image   : url(./realsee_anime.png);
  background-size    : 2640px 48px;
  background-position: 0 0;
  background-repeat  : no-repeat;
  width              : auto;
  height             : 50px;
  background-color   : #1d2021;
  border-radius      : 4px;
}

@keyframes anime-3 {
  from {
    background-position: 200px bottom;
  }

  to {
    background-position: -2880px bottom;
  }
}

.anime-4 {
  position: relative;
}

.anime-4a {
  position        : absolute;
  width           : 10px;
  height          : 10px;
  background-color: #36cfc9;
  animation       : anime-4a 5s ease infinite;
}

@keyframes anime-4a {

  0%,
  100% {
    left: 50%;
    top : 20%;

  }

  33.3% {
    left            : 80%;
    top             : 80%;
    background-color: #1890ff;
  }

  66.6% {
    left            : 20%;
    top             : 80%;
    background-color: #fa541c;
  }
}